<template>
	<view class="container">
		<view class="finance-top">
			<text class="detail blue" @click="goTo(`/pages/personal/cardbag/balanceDetail?custId=${cardInfo.custId}&custType=${cardInfo.custType}`)">金额明细</text>
			<text class="withdraw" @click="goTo(`/pages/personal/cardbag/withdraw`)">去提现</text>
			<text class="recharge yellow" @click="goTo(`/pages/personal/recharge/recharge?custId=${cardInfo.custId}&custType=${cardInfo.custType}`)">去充值</text>
		</view>
		<view class="finance-box">
			<view class="finance-title flex center">账户余额</view>
			<view class="num">¥ {{cardInfo.balance}}</view>
		</view>
		<view class="card-box">
			<view class="card-top">
				<view class="card-title">我的银行卡</view>
				<view class="btn-set" @click="openPoup" v-if="!bankList.length">去绑定</view>
				<view class="btn-del" @click="deleteCard" v-else>删除</view>
			</view>
			<view class="content-null-box" v-if="!bankList.length">暂无绑定的银行卡</view>
			<view class="content-list" v-else>
				<scroll-view
					scroll-y="true" 
					refresher-enabled="true"
				    @refresherrefresh="onRefresh"
					:refresher-triggered="isRefreshing"
					style="height: 100%;"
				>
					<view class="card-list" v-for="(item, index) in bankList" :key="index">
						<view class="card-list-t">
							<view>{{item.bankName}}</view>
							<image :src="$imgUrl + '/personal/card-icon.png'" class="cards-img" mode=""></image>
						</view>
						<view class="card-list-b">
							<view>{{$filters.hideCardNum(item.cardNo)}}</view>
							<view class="card-for-img">
								<image v-for="(i,x) in 2" :key="x" :src="$imgUrl + '/personal/card-round-icon.png'" class="card-img-round" mode=""></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
	<!-- 新增银行卡弹窗 -->
	<uni-popup ref="popup" type="bottom" background-color="rgba(0,0,0,0)">
		<view class="poup-box">
			<view class="poup-title">新增银行卡</view>
			<form @submit="formSubmit">
				<view class="uni-form-item uni-column">
					<view class="title">开户银行</view>
					<input class="uni-input" v-model="form.bankName" name="input" placeholder="请输入开户银行" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">银行卡号</view>
					<input class="uni-input" type="number" v-model="form.cardNo" name="input" placeholder="请输入银行卡号" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">所属支行</view>
					<input class="uni-input" v-model="form.subBankName" name="input" placeholder="请输入所属支行" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">姓名</view>
					<input class="uni-input" v-model="form.contactName" name="input" placeholder="请输入姓名" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">手机号</view>
					<input class="uni-input"  type="number" v-model="form.contactPhone" name="input" placeholder="请输入手机号" maxlength="11" />
				</view>
				<view class="uni-btn-v">
					<button form-type="submit">确认</button>
				</view>
			</form>
		</view>
	</uni-popup>
	<!-- 删除银行卡弹窗 -->
	<uni-popup ref="deletepoup" type="center" background-color="rgba(0,0,0,0)">
		<view class="delete-poup">
			<view class="flex1">确认删除银行卡吗？</view>
			<view>
				<view  class="flex1 cancel" @click="cancelDelpoup">取消</view>
				<view  class="flex1 confirm" @click="caonfirmDelpoup">确认</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onShow } from "@dcloudio/uni-app"
import { getFinanceAccount,listBankCard,bindBankCard,deleBankCard } from '@/common/API/bills'
const popup = ref()
const deletepoup = ref(false)
const cardInfo = ref({})
const bankList = ref([])
const isRefreshing= ref(false)
const form = reactive({
	bankName: '',
	cardNo: '',
	subBankName: '',
	contactName: '',
	contactPhone: ''
})

onShow(()=>{
	getBalanceInfo()
	getBankList()
})

// 获取卡包信息
const getBalanceInfo = async ()=>{
	cardInfo.value = await getFinanceAccount({});
}

// 获取银行卡信息
const getBankList = async ()=>{
	bankList.value = await listBankCard({});
	setTimeout(() => {
	    isRefreshing.value = false;
	    uni.stopPullDownRefresh()
	}, 300)
}

//打开弹窗
const openPoup = () => {
	popup.value.open()
}
//提交
const formSubmit = () => {
	if(!form.bankName){
		uni.showToast({
			title:'请输入开户银行',
			icon:'none'
		})
	}else if(!form.cardNo){
		uni.showToast({
			title:'请输入银行卡号',
			icon:'none'
		})
	}else if(form.cardNo.length<16){
		uni.showToast({
			title:'请输入正确的银行卡号',
			icon:'none'
		})
	}else if(!form.subBankName){
		uni.showToast({
			title:'请输入所属支行',
			icon:'none'
		})
	}else if(!form.contactName){
		uni.showToast({
			title:'请输入姓名',
			icon:'none'
		})
	}else if(!form.contactPhone){
		uni.showToast({
			title:'请输入手机号',
			icon:'none'
		})
	}else{
		let res = bindBankCard(form)
		uni.showToast({
			title: '提交成功'
		});
		popup.value.close()
		setTimeout(()=> {
			form.bankName = ''
			form.cardNo = ''
			form.subBankName = ''
			form.contactName = ''
			form.contactPhone = ''
			getBankList()
		}, 1000);
	}
}
//下拉刷新
const onRefresh = () => {
	isRefreshing.value = true;
	getBankList()
}
//删除银行卡
const deleteCard = () => {
	deletepoup.value.open()
}
//关闭删除弹窗
const cancelDelpoup = () => {
	deletepoup.value.close()
}
//确认删除弹窗
const caonfirmDelpoup = () => {
	let res = deleBankCard({
		id: bankList.value[0].id
	})
	uni.showToast({
		title: '删除成功'
	});
	deletepoup.value.close()
	setTimeout(()=> {
		getBankList()
	}, 1000);
}

const goTo = (url)=>{
	uni.navigateTo({
		url: url
	})
}
</script>

<style lang="scss" scoped>
.container{
	padding: 20rpx 32rpx;
	background: #fff;
	height: 100vh;
}
.finance-top{
	text-align: right;
	margin-bottom: 16rpx;
	.detail{
		margin-right: 30rpx;
	}
	.withdraw{
		margin-right: 30rpx;
		color: #f3af00;
	}
}
.finance-box{
	width: 686rpx;
	border-radius: 30rpx;
	height: 364rpx;
	padding-top: 90rpx;
	background: linear-gradient(134deg, #FCD266 0%, #FF536B 100%);
	.finance-title{
		text-align: center;
		line-height: 48rpx;
		font-size: 32rpx;
		color: #fff;
	}
	.num{
		text-align: center;
		margin-top: 30rpx;
		font-size: 56rpx;
		font-weight: bold;
		color: #fff;
	}
}
.card-box{
	.card-title{
		font-size: 32rpx;
		color: #000000;
	}
	.card-top {
		padding: 40rpx 0 20rpx 0;
		display: flex;
		justify-content: space-between;
	}
	.content-null-box{
		border: 2rpx solid rgba(204, 204, 204, 1);
		width: 686rpx;
		height: 416rpx;
		border-radius: 30rpx;
		box-shadow: 0px 6rpx 32rpx  rgba(0, 0, 0, 0.03);
		color: rgba(77, 77, 77, 1);
		text-align: center;
		line-height: 416rpx;
	}
	.btn-set{
		color: rgba(253, 150, 24, 1);
		font-size: 28rpx;
	}
	.btn-del{
		color: rgba(242, 85, 85, 1);
		font-size: 28rpx;
	}
	.content-list{
		flex: 1;
		overflow: hidden;
		.card-list{
			width: 686rpx;
			height: 416rpx;
			border-radius: 30rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			margin-bottom: 32rpx;
			background: linear-gradient(135.54deg, rgba(45, 96, 255, 1) 0%, rgba(83, 155, 255, 1) 100%);
			.card-list-t{
				flex: 1;
				padding: 78rpx 60rpx 0 60rpx;
				display: flex;
				justify-content: space-between;
				&>view{
					font-size: 44rpx;
					color: #fff;
				}
				.cards-img{
					width: 70rpx;
					height: 70rpx;
				}
			}
			.card-list-b{
				height: 128rpx;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 34rpx;
				&>view{
					padding: 0 60rpx;
					color: #fff;
				}
				.card-img-round{
					width: 60rpx;
					height: 60rpx;
				}
				.card-for-img > image:nth-of-type(2){
					margin-left: -30rpx;
				}
			}
		}
	}
}
.uni-column{
	display: flex;
	margin: 0 40rpx;
	padding: 24rpx 0;
	justify-content: space-between;
	align-items: center;
	font-size: 32rpx;
	color: rgba(77, 77, 77, 1);
	position: relative;
	.uni-input{
		text-align: right;
	}
	&::before{
		content: " ";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		border-top: 1px solid #D9D9D9;
		color: #D9D9D9;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
}
.poup-box{
	height: 768rpx;
	width: 100%;
	background-color: #fff;
	border-radius: 28rpx 28rpx 0 0;
	.poup-title{
		text-align: center;
		padding: 32rpx 0;
		color: rgba(102, 102, 102, 1);
		font-size: 28rpx;
	}
	.uni-btn-v button{
		margin: 48rpx 32rpx 0 32rpx;
		height: 84rpx;
		border-radius: 200px;
		background: rgba(253, 150, 24, 1);
		color: #fff;
		font-size: 32rpx;
	}
}
.delete-poup{
	width: 560rpx;
	height: 314rpx;
	background: #fff;
	border-radius: 16rpx;
	color: rgba(102, 100, 100, 1);
	text-align: center;
	display: flex;
	flex-direction: column;
	&>view:nth-of-type(1){
		font-size: 30rpx;
		flex: 1;
		position: relative;
		color: rgba(102, 100, 100, 1);
		&::before{
			content: " ";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			border-top: 1px solid #D9D9D9;
			color: #D9D9D9;
			-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
		}
	}
	&>view:nth-of-type(2){
		display: flex;
		height: 100rpx;
	}
	&>view:nth-of-type(2)>view{
		font-size: 34rpx;
		flex: 1;
		position: relative;
	}
	.cancel{
		color: rgba(102, 100, 100, 1);
	}
	.cancel::before{
		content: " ";
		position: absolute;
		right: 0;
		top: 0;
		width: 1px;
		height: 200%;
		border-right: 1px solid #D9D9D9;
		color: #D9D9D9;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	.confirm{
		color: rgba(253, 150, 24, 1);
	}
	.flex1{
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
